import React, { useState } from 'react';
import Viewer from 'react-viewer';

export interface ImageInfo {
  src: string;
  alt?: string;
  downloadUrl?: string;
}

interface ImageViewerProps {
  visible: boolean;
  onClose: () => void;
  images: ImageInfo[];
  activeIndex?: number;
  zIndex?: number;
}

const ImageViewer: React.FC<ImageViewerProps> = ({
  visible,
  onClose,
  images,
  activeIndex = 0,
  zIndex = 1000
}) => {
  // 修复Viewer组件在某些情况下的类型问题
  const viewerImages = images.map(img => ({
    src: img.src,
    alt: img.alt || '',
    downloadUrl: img.downloadUrl || img.src
  }));

  // 如果没有图片，不显示预览
  if (viewerImages.length === 0) {
    return null;
  }

  return (
    <Viewer
      visible={visible}
      onClose={onClose}
      images={viewerImages}
      activeIndex={activeIndex}
      zIndex={zIndex}
      downloadable
      noNavbar
    />
  );
};

// 用于全局管理当前预览的图片
export const useImagePreview = () => {
  const [previewState, setPreviewState] = useState({
    visible: false,
    images: [] as ImageInfo[],
    activeIndex: 0
  });

  const openPreview = (images: ImageInfo[], index = 0) => {
    setPreviewState({
      visible: true,
      images,
      activeIndex: index
    });
  };

  const closePreview = () => {
    setPreviewState(prev => ({
      ...prev,
      visible: false
    }));
  };

  return {
    previewState,
    openPreview,
    closePreview
  };
};

export default ImageViewer; 